<template>
  <!-- <el-alert :closable="false">
      <router-view />
  </el-alert>-->
  <div style="padding:30px;width:60%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="115px"
      v-loading="loading"
      class="demo-ruleForm"
    >
      <el-form-item v-if="info.level>3" label="分子公司">
        <el-select v-model="value1" placeholder="请选择分子公司" @change="findBumen()">
          <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="info.level>2" label="部门">
        <el-select v-model="value2" placeholder="请选择部门" @change="findPerson()">
          <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人">
        <el-select v-model="value3" filterable placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户公司名称" prop="companyName" required>
        <el-input v-model="ruleForm.companyName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="项目金额" prop="proMoney">
        <el-col :span="16">
          <el-input-number
            type="number"
            v-model="ruleForm.proMoney"
            :precision="2"
            :step="0.1"
            :min="0"
          ></el-input-number>&emsp;元
        </el-col>
      </el-form-item>
      <el-form-item label="项目名称" prop="proName">
        <el-col :span="16">
          <el-input type="string" v-model="ruleForm.proName"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="项目类型" prop="proType">
        <el-select v-model="ruleForm.proType" placeholder="请选择项目类型">
          <el-option
            type="string"
            v-for="item in xiangmuleixing"
            :key="item.label"
            :label="item.value"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合同参与人员" prop="partier">
        <el-col :span="16">
          <el-select
            style="width:100% ;"
            multiple
            filterable
            v-model="ruleForm.partier"
            placeholder="请选择参与人员"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>


      <el-form-item label="合同编号" prop="conNumber">
        <el-input v-model="ruleForm.conNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="合同文本" prop="conText">
        <el-input type="textarea" v-model="ruleForm.conText" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input v-model="ruleForm.telephone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="考核金额" prop="cheMoney">
        <el-input-number v-model="ruleForm.cheMoney" :precision="2" :step="0.1" :min="1"></el-input-number>&emsp;¥
      </el-form-item>
      <el-form-item label="签约人">
        <el-select v-model="value4" filterable placeholder="请选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约日期" prop="signTime">
        <el-date-picker v-model="ruleForm.signTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="完成日期" prop="finishTime">
        <el-date-picker v-model="ruleForm.finishTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="预收款" prop="advReceived">
        <el-input-number v-model="ruleForm.advReceived" :precision="2" :step="0.1" :min="1"></el-input-number>&emsp;¥
      </el-form-item>
      <el-form-item label="执行日期" prop="executeTime">
        <el-date-picker v-model="ruleForm.executeTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="收款进度" prop="rate">
        <el-input-number v-model="ruleForm.rate" :precision="0" :step="1" :min="0" :max="100"></el-input-number>&emsp;%
      </el-form-item>
      <el-form-item label="合同款" prop="amount">
        <el-input-number v-model="ruleForm.amount" :precision="2" :step="0.1" :min="1"></el-input-number>&emsp;¥
      </el-form-item>
      <el-form-item label="合同图片">
        <el-upload
          class="upload-demo"
          :action="host+'upload'"
          :headers="{token:getToken()}"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :on-success="handleSuccess"
          ref="upload"
        >
          <el-button size="small">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import {
  getToken,
  gettype,
  getid,
  getlevel,
  getbid,
  getpid
} from "@/utils/auth";
import request from "@/utils/request";
import moment from "moment";
import { MessageBox, Message } from "element-ui";
import { host } from "@/config";

export default {
  name: "contractlist",
  data() {
    return {
      host: host,
      info: null,
      getid,
      loading:false,
      getToken,
      ruleForm: {
        partier: null,
        proMoney: null,
        proName: null,
        proType: null,
        companyName: null,
        conNumber: null,
        conText: null,
        telephone: null,
        cheMoney: null,
        signTime: null,
        finishTime: null,
        advReceived: null,
        executeTime: null,
        rate: null,
        amount: null
      },
      formLabelWidth: "80px",
      rules: {
        conNumber: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      value1: null,
      options1: [],
      value2: null,
      options2: [],
      value3: null,
      options3: [],
      value4: null,
      options4: [],
      fileList: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, //// {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
      ],
      xiangmuleixing: [
        {
          label: 1,
          value: "安全评价"
        },
        {
          label: 2,
          value: "职卫评价"
        },
        {
          label: 3,
          value: "安全咨询"
        },
        {
          label: 4,
          value: "安全检查"
        },
        {
          label: 5,
          value: "检测检验"
        }
      ],
      fileListTmp: []
    };
  },
  created() {
    this.findInfo();
  },
  methods: {
    findInfo() {
      let self = this;
      request("/person/rolelist", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function(response) {
        self.info = response.data.object;
        var level = self.info.level;
        let info=self.info;
        console.log('l am here')
        if (level == 4) {
        } else if (level == 3) {
          self.value1 = info.bid;
        } else if (level == 2) {
          self.value1 = info.bid;
          self.value2 = info.pid;
        }
         self.findCompnany();
      }).catch(e=>{
        console.log(e)
      })
    },
    findPerson(query) {
      let self = this;
      var resdata = {
        pid: this.value2,
        name: query
      };
      request("/person/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        let list = response.data.object.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        self.options3 = list;
        self.options4 = list;
      }).catch(e=>{
        console.log(e)
      })
    },
    findBumen() {
      let self = this;
      var resdata = {
        bid: this.value1,
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/department/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options2 = response.data.object;
        console.log("response", response);
      }).catch(e=>{
        console.log(e)
      })
    },
    findCompnany() {
      let self = this;
      var resdata = {
        cid: self.info.cid,
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/branch/select", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options1 = response.data.object;
        // console.log(response.options1);
      }).catch(e=>{
        console.log(e)
      })
    },
    remoteMethod(query) {
      if (query !== "") {
        this.selectLoading = true;
        this.findPerson(query);
      } else {
        this.options = [];
      }
    },
    resetForm(formName) {
      // this.value1 = null;
      // this.value2 = null;
      this.value3 = null;
      this.value4 = null;
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles();
    },
    submitForm(formName) {
    
      let self = this;
      let resdata = this.ruleForm;
      var formdata = self.ruleForm;
      formdata.proPrincipal = parseInt(formdata.proPrincipal);
      formdata.conNumber = formdata.conNumber.toString();
      formdata.proType = formdata.proType.toString();
      formdata.partier = formdata.partier.join("&");
      

      let params = {
        //zhuanhuan
       
        proName:resdata.proName,
        proMoney:resdata.proMoney,
        proType: formdata.proType,
        partier: formdata.partier,
        cid: this.info.cid,
        uid: this.value1,
        pid: this.value2,
        relPerson: this.value3 * 1,
        // flag: 1,
        conNumber: resdata.conNumber,
        conText: resdata.conText,
        telephone: resdata.telephone,
        cheMoney: resdata.cheMoney,
        sign_person: this.value4 * 1,
        signTime: moment(resdata.signTime).format("YYYY-MM-DD HH:mm:ss"),
        finishTime: moment(resdata.finishTime).format("YYYY-MM-DD HH:mm:ss"),
        advReceived: resdata.advReceived,
        executeTime: moment(resdata.executeTime).format("YYYY-MM-DD HH:mm:ss"),
        rate: resdata.rate,
        amount: resdata.amount,
        content: ""
      };
      for (let i in this.fileListTmp) {
        let url = this.fileListTmp[i];
        params.content += params.content == "" ? url : "," + url;
      }
      console.log(params);
      this.$refs[formName].validate(valid => {
        if (valid) {
            self.loading=true
          request("contract/add", {
            method: "post",
            headers: {
              "Content-Type": "application/json"
            },
            data: params
          }).then(function(response) {
            this.loading=false
            if (response.data.code == 1) {
              self.resetForm("ruleForm");
              Message({
                message: "添加成功",
                type: "success",
                duration: 2 * 1000
              });
            }
          });
        } else {
          console.log("添加失败");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      if (response.code == 1) {
        this.fileListTmp = fileList.map(item => {
          return item.response.object;
        });
      } else {
        Message({
          message: "上传失败",
          type: "error",
          duration: 2 * 1000
        });
      }
      // console.log("1", response);
      // console.log("2", file);
      // console.log("3", fileList);
    }
  }
};
</script>